<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="{$Think.RES_URL}vue/"/>
    <script src="js/vue-2.5.2.js"></script>
    <style>
        div {
            margin: 30px
        }
    </style>
</head>
<body>
<div id="app">

    <input v-model="userInfo.name" lazy>
    <template v-for="sexItem in formData.sexChoice">
        <div>
            <label v-bind:for="'sex'+sexItem.value">{{sexItem.text}}</label>
            <input v-bind:id="'sex'+sexItem.value" name="sex" v-bind:value="sexItem.value" type="radio"
                   v-model="userInfo.sex">
        </div>
    </template>

    <div>
        <label>是否已婚</label>
        <input
                type="checkbox"
                v-model="userInfo.married_flag"
                v-bind:true-value="1"
                v-bind:false-value="2">

    </div>
    <div>
        <label>是否毕业</label>
        <input
                type="checkbox"
                v-model="userInfo.graduated_flag"
        >
    </div>

    <div v-show="userInfo.graduated_flag">
        <select v-model="userInfo.grade">
            <option v-for="gradeOption in formData.gradeSelect" v-bind:value="gradeOption.value">
                {{ gradeOption.text }}
            </option>
        </select>
    </div>


    <div>
        {{userInfo}}
    </div>


</div>
</div>
<script>


    new Vue(
        {
            el: "#app",
            data: {
                items: [],
            },
            methods: {
                showDialog: function () {
                    this.showDialogFlag = !this.showDialogFlag;
                }
            }
        }
    );

</script>
</body>
</html>